<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>FASHION-MAI</title>

<link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" />
<style type="text/css">
	A:link {text-decoration: none; color: black;}
	A:visited {text-decoration: none; color: black;}
	A:active {text-decoration: none; color: black;}
	A:hover {text-decoration: none; color: red;}
	
	#topMenu {color:white; height: 30px; line-height: 30px; background-color: black;}
	#search { font-size:12px; font-weight:bolder; text-align: center;}
	#center	{ width:70%; margin-left: 15%; margin-top: 0px;}
	table{text-align: center; font-size: 14px;}
	tr{height: 25px;}
	td{width:200px;}
	
	#dialog-form {font-size: 12px; font-weight:bolder;}
	#dialog-form span {display: inline-block; width: 60px;}
	
	.tr-backgroundColor {background: red; }
</style>
 
<script src=" /js/jquery-1.4.2.min.js" ></script>
<script src="/js/jquery-ui-1.8.14.custom.min.js"></script>
<script src="/js/jquery.ui.datepicker.js"></script> 
<script type="text/javascript">

	$(document).ready(function(){
	    $(".overEventColor").hover(over, out);
    	function over(event) {
        	$(this).css("background-color", "yellow");
 		    $(this).css("cursor", "pointer"); 
    	}
    	function out(event) {
     		$(this).css("background-color", "white");
 		}
	    
    	$("[name=orderDate],[name=dueDate]","#dialog-form").datepicker({
    		monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    		dateFormat: 'yy-mm-dd',
		    prevText: '이전달',
		    nextText: '다음달',
		    changeMonth: true,
		    changeYear: true,
		});
    	
    	//등록 다이얼로그
    	$("#dialog-form").dialog({
			autoOpen: false,
			width: 350,
			height: 650,
			modal: true,
			buttons : {
				"ok" : function(){
					if($("[name='customer']").val() == null || $("[name='customer']").val() == '')
					{
						alert(" 거래처 입력 ");
						return;
					}
					if(isNaN(new Number(new String($("[name='won']").val()))))
					{
						alert("won 숫자만 입력");
						return;
					}
					if(isNaN(new Number(new String($("[name='yen']").val()))))
					{
						alert("yen 숫자만 입력");
						return;
					}
					$("#insert-form").submit();
					$(this).dialog("close");
				}
			},
			Cancel: function(){
				$(this).dialog("close");
			}
		});//--등록 다이얼로그
		
 		//상세보기 다이얼로그
    	$("#select-dialog-form").dialog({
			autoOpen: false,
			width: 600,
			height: 600,
			modal: true,
			buttons : {
				"ok" : function(){
					$(this).dialog("close");
				},
			}
    	});//--상세보기 다이얼로그 
    	
    	//지우기 확인 다이얼로그
    	$("#delete-dialog").dialog({
			autoOpen: false,
			width: 300,
			height: 200,
			modal: true,
			buttons : {
				"ok" : function(){
					$(this).dialog("close");
				},
				cansel : function(){
					$(this).dialog("close");
				}
			}
    	});//지우기 확인 다이얼로그 
	});
	
	$(function(){
	    $("a:not(:eq(0))").click(function(event){
	    	event.preventDefault();
	    	var pageNum = $(this).attr("href").split("=")[1];
	    	$("#fm").find("[name=pageNo]").val(pageNum);
	    	$("#submit")[0].click();
	    });
	}); 

	$(function(){
		var dates = $( "#firstDate, #lastDate" ).datepicker({
				monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
			    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
			    dateFormat: 'yy-mm-dd',
			    prevText: '이전달',
			    nextText: '다음달',
			    changeMonth: true,
			    changeYear: true,
			    autoSize:true,
			    showOn: "button",
			    buttonImage: '/css/ui-lightness/images/calendar.gif',
			    buttonImageOnly: true,
			onSelect: function( selectedDate ) {
				var option = this.id == "firstDate" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});	
	});
	
	$(function(){
		$("#submit").button({
			icons: {
                primary: "ui-icon-search"
            }
		}).click(function(){
			$("#fm").submit();
		});
		
		$("#insert").button({
			icons: {
                primary: "ui-icon-circle-plus"
            }
		}).click(function(){
			$("#ajax_titleNo").addClass("ajax_titleNo");
			$("#dialog-form").dialog("open");
		});
		
		$("#update").button({
			icons: {
                primary: "ui-icon-circle-check",
           	}
		}).click(function(){
			$("#ajax_titleNo").removeClass("ajax_titleNo");
			var temp = $("[name='radio']:checked").val();
			if(typeof temp == "undefined")
			{
				alert("choice, please...");
				return;
			}
			$("#insert-form").removeAttr("action").attr("action","orderSheetUpdate.do");
			var no = $.trim($("[name='radio']:checked").parent().parent().find("td").eq(1).text());
			$.ajax({
				url: "orderSheetUpdateSelect.do",
				type : "post",
				data:{ titleNo : no },
				success: function(msg){
					var obj = JSON.parse(msg);
					$("[name='titleNo']").val(obj.titleNo);
					$("[name='originTitleNo']").val(obj.titleNo);
					$("[name='customer']").val(obj.customer);
					$("[name='orderDate']").val(obj.orderDate);
					$("[name='dueDate']").val(obj.dueDate);
					$("[name='won']").val(obj.won);
					$("[name='yen']").val(obj.yen);
					$("[name='totalAmount']").val(obj.totalAmount);
					$("[name='color']").val(obj.color);
					$("[name='mix']").val(obj.mix);
					$("#dialog-form").dialog("open");	
				}
			});
		});
		
		$("#delete").button({
			icons: {
                primary: "ui-icon-circle-minus"
            }
		}).click(function(){
			var temp = $("[name='radio']:checked").val();
			if(typeof temp == "undefined")
			{
				alert("choice, please...");
				return;
			}
			
			var no = $.trim($("[name='radio']:checked").parent().parent().find("td").eq(1).text());
			$.ajax({
				url: "orderSheetDelete.do",
				type : "post",
				data:{ titleNo : no },
				success: function(){
					location.href = "http://fashionmai.iisweb.co.kr/orderSheet.do";
				}
			});
		});
	});
	
	$(function(){	//상세보기
		$(".overEventColor").dblclick(function(){
			var no = $.trim($(this).find('td').eq(1).text());
			$("#select-dialog-form").dialog("open");
			$.ajax({
				url: "orderSheetSelect.do",
				type : "post",
				data:{ titleNo : no },
				success: function(msg){
					var obj = JSON.parse(msg);
					if(obj.photo_uri != null)
					{
						$("td","#select-dialog-form").eq(0).html("<img src='/upload/"+obj.photo_uri+"' />");
					}
					$("td","#select-dialog-form").eq(2).find("textarea").text(obj.color);
					$("td","#select-dialog-form").eq(4).find("textarea").text(obj.mix);
					$("#select-dialog-form").dialog("open");
				}
			});	
		});
	});	
	
	$(function(){
		$("#ajax_titleNo").blur(function(){
			if($("#ajax_titleNo").attr("class") == ""){
				return;
			}
			var no = $("#ajax_titleNo").val();
			$.ajax({
				url: "orderSheetTitleCheck.do",
				type : "post",
				data:{ titleNo : no },
				success: function(msg){
					var obj = JSON.parse(msg);
					if(obj.result == 1) return;
					else {
						alert("품번이 중복 됩니다");
						$("#ajax_titleNo").focus();
					}
				}
			});
		});
	});
</script>
</head>
<body>

	<div id="topMenu">  
		<span>
			주문서 |
			<a href="firstPage.do">처음으로</a>
		</span>
	</div>
		
	<div id="search">
		<p>
			<form id="fm" action="orderSheet.do" method="post">
				날짜 : <input type="text" id="firstDate" name="firstDate" readonly="readonly" value="${orderSheet.firstDate}" /> ~ <input type="text" id="lastDate" name="lastDate" readonly="readonly" value="${orderSheet.lastDate}" />&nbsp;&nbsp;
				품번 : <input type="text" name="search_titleNo" value="${orderSheet.search_titleNo}" size="10" maxlength="12" />&nbsp;&nbsp;
				상호 : <input type="text" name="search_costomer" value="${orderSheet.search_costomer}" size="10" maxlength="12" />&nbsp;&nbsp;
				      <input type="hidden" name="pageNo" value="${orderSheet.pageNo}" />
					  <button id="submit" style="font-size: 10px">search</button>		      
			</form>
		</p>
	</div>
	
	<div id="center">
		<table border="0" align="center">
			<tr style="background-color: gray; color:white;">
				<td style="width:30px;">◎</td>
				<td><B>품번</B></td>
				<td><B>상호</B></td>
				<td><B>주문일 </B></td>
				<td><B>납기일 </B></td>
				<td><B>단가(원)</B></td>
				<td><B>단가(엔)</B></td>
				<td><B>총수량 </B></td>
			</tr>
			<c:forEach var="list" items="${orderSheetList}">
				<tr class="overEventColor">
					<td style="width:30px;"> <input type="radio" name="radio"/> </td>
					<td> ${list.titleNo } </td>
					<td> ${list.customer }</td>
					<td> ${list.orderDate } </td>
					<td> ${list.dueDate } </td>
					<td> ￦${list.won } </td>
					<td> ￥${list.yen } </td>
					<td> ${list.totalAmount } </td>
				</tr>
			</c:forEach>
			<tr style="height: 3px;">
				<td colspan="8" style="text-align: center; background-color: gray;"> </td>
			</tr>
			<tr>
				<td align="right" colspan="8" style="font-size: 10px">
					<button id="insert"> 등록 </button>
					<button id="update"> 수정 </button>
					<button id="delete"> 삭제 </button>
				</td>
			</tr>
			<tr>
				<td colspan="8" style="text-align: center;">${pasing}</td>
			</tr>
		</table>
	</div>
	
	<!-- dialog-form -->
	<div id="dialog-form" title=" 주문서 입력 ">
		<form id="insert-form" action="orderSheetInsert.do" method="post" enctype="multipart/form-data">
		<fieldset>
				<span> 품번 </span>
				<input id="ajax_titleNo" type="text" name="titleNo" maxlength="12" /><br />
				<input type="hidden" name="originTitleNo" maxlength="12" /><br />
				
				<span> 거래처  </span>
				<input type="text" name="customer" maxlength="12" /><br />
				
				<span> 주문일  </span>
				<input type="text" name="orderDate" readonly="readonly" /><br />
				
				<span> 납기일  </span>
				<input type="text" name="dueDate" readonly="readonly" /><br />
				
				<span> 단가(￦) </span>
				<input type="text" name="won" maxlength="12" /><br />
				
				<span> 단가(￥) </span>
				<input type="text" name="yen" maxlength="12" /><br />
				
				<span> 총수량  </span>
				<input type="text" name="totalAmount" maxlength="12"/><br />
				
				<span> 색상  </span>
				<textarea name="color" rows="5" cols="24" style="overflow-x:hidden; overflow-y:auto;"></textarea><br />
				
				<span> 혼용률  </span>
				<textarea name="mix" rows="5" cols="24" style="overflow-x:hidden; overflow-y:auto;"></textarea><br />
				
				<p> 사진(jpg) </p>
				<input type="file" name="file" />
		</fieldset>
		</form>
	</div>
	
	<div id="select-dialog-form" title="상세보기">
		<fieldset>
			<table border="0">
				<tr>
					<td colspan="4"></td>
				</tr>
				<tr style="padding-top: 10px;">
					<td align="right" valign="top" style="width:10px;"> 색상 </td>
					<td> <textarea rows="10" cols="35" readonly="readonly" style="overflow-x:hidden; overflow-y:auto;"></textarea> </td>
					<td align="right" valign="top" style="width:10px;"> 혼용률 </td>
					<td> <textarea rows="10" cols="35" readonly="readonly" style="overflow-x:hidden; overflow-y:auto;"></textarea> </td>
				</tr>
			</table>	
		</fieldset>
	</div>
	
	<div id="delete-dialog" title="delete">
		really??
	</div>
</body>
</html>